<template>
  <div class="recommend">
    <div class="citiesMain" @mouseleave="citiesItemLeave">
      <!-- 城市 -->
      <div
        class="citiesItem"
        v-for="(item,index) of CitiesList"
        :key="index"
        @mouseenter="citiesItemEngter(index)"
      >
        <i>{{item.type}}</i>
        <span class="el-icon-arrow-right"></span>
      </div>
      <!-- 城市右边 -->
      <div class="citiesMainAssistant" v-show="isShowAssistant">
        <div class="AssistantItem" v-for="(item,index) of CitiesListChilren" :key="index" @click="searchCity(item)">
          <i>{{index+1}}</i>
          <span>{{item.city}}</span>
          <P>{{item.desc}}</P>
        </div>
      </div>
    </div>
    <div class="recommend">
      <h4>推荐城市</h4>
      <div class="recommendImg">
        <img src="../../assets/img/pic_sea.jpeg" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["CitiesList"],
  data() {
    return {
      CitiesListChilren: [],
      isShowAssistant: false
    };
  },
  methods: {
    // 鼠标移入
    citiesItemEngter(index) {
      this.CitiesListChilren = this.CitiesList[index].children;
      this.isShowAssistant = true;
      //   console.log("this.CitiesListChilren: ", this.CitiesListChilren);
    },
    // 鼠标移除
    citiesItemLeave() {
      this.isShowAssistant = false;
    },
    // 城市搜索
    searchCity(item){
      // console.log('item: ', item.city);
      this.$emit('searchCity',item.city)

    }
  }
};
</script>


<style lang="less" scoped>
.citiesMain {
  border-bottom: 1px solid #dddddd;
  position: relative;
  .citiesItem {
    position: relative;
    font-size: 14px;
    padding: 10px 15px;
    //  border: 1px solid #dddddd;
    border: 1px solid #dddddd;
    border-bottom: 0px solid transparent;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    &:hover {
      border-right: 2px solid white;
      color: orange;
    }
  }
  //   右边
  .citiesMainAssistant {
    background: white;
    border: 1px solid #dddddd;
    width: 260px;
    // background: orchid;
    position: absolute;
    right: -301px;
    top: 0;
    z-index: 2;
    padding: 12px 20px;
    // box-sizing: border-box;
    .AssistantItem {
      display: flex;
      // justify-content: ;
      align-items: center;
      height: 36px;
      font-size: 14px;
      color: #999999;
      i {
        font-size: 32px;
        color: orange;
      }
      span {
        color: orange;
        padding: 0 20px;
      }
      p:hover {
        text-decoration: underline;
      }
      i,
      span,
      p {
        cursor: pointer;
      }

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.recommend {
  h4 {
    font-weight: 400;
    padding: 20px 0 10px 0;
    border-bottom: 1px solid #dddddd;
  }
  .recommendImg {
    margin-top: 10px;
    width: 260px;
    height: 175px;
    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>